<template>
    <div>
        <div>
            <el-dialog class="nyDialog" :visible.sync="is_dialog_show" width="42%" :close-on-click-modal="false"
                :before-close="() => { this.close(); }">
                <div class="overflow-hidden w-full h-full flex flex-col items-center" style="border-radius:4px;">
                    <div class="w-full h-w48 flex items-center px-w20 justify-between bg-caux text-white">
                        <div class="text-f14">{{ m_data.id ? "编辑规则" : "添加规则" }}</div>
                        <i class="el-icon-circle-close   cursor-pointer" @click.stop="close()"></i>
                    </div>
                    <div class="w-full flex justify-center">
                        <div class="flex flex-col w-w8/12  ">
                            <div class="flex flex-row items-center  w-full h-w50 leading-w50 text-c3 text-f16  mt-w30">
                                <div class=" w-w1/4 text-right pr-w20">规则名称</div>
                                <el-input class="w-w3/4" placeholder="请输入内容" v-model="m_data.name" clearable autofocus>
                                </el-input>
                            </div>
                            <!-- <div class="flex flex-row items-center  w-full h-w50 leading-w50 text-c3 text-f16  mt-w30">
                                <div class=" w-w1/4 text-right pr-w20">规则描述</div>
                                <el-input class="w-w3/4" placeholder="请输入内容" v-model="m_data.describe" clearable
                                    autofocus>
                                </el-input>
                            </div> -->
                            <div class="flex flex-row  w-full  text-c3 text-f16  mt-w30"
                                :class="m_data.list_question.length > 0 ? 'items-start ' : 'items-center'">
                                <div class=" w-w1/4 text-right pr-w20">计分问题</div>
                                <el-select class="w-w3/4" v-model="m_data.list_question" multiple placeholder="请选择问题">
                                    <el-option v-for="(item, index) in s_rule.list_question" :key="index"
                                        :label="(index + 1) + '、' + item.info" :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="flex flex-row  w-full  text-c3 text-f16  mt-w30"
                                :class="m_data.list_about_role.length > 0 ? 'items-start ' : 'items-center'">
                                <div class=" w-w1/4 text-right pr-w20">关联规则</div>
                                <el-select class="w-w3/4" v-model="m_data.list_about_role" multiple placeholder="请选择规则">
                                    <el-option v-for="(item, index) in list_rule" :key="index" :label="item.name"
                                        :value="item.id" :disabled="item.list_about_role.length > 0">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="flex flex-row items-center  w-full h-w50 leading-w50 text-c3 text-f16  mt-w30">
                                <div class=" w-w1/4 text-right pr-w20">计算模式</div>
                                <el-radio-group class="w-w3/4" v-model="m_data.compute_mode">
                                    <el-radio :label="model.id" v-for="(model, mIndex) in list_model" :key="mIndex">
                                        {{ model.name }}
                                    </el-radio>
                                </el-radio-group>
                            </div>
                            <div v-if="m_data.compute_mode == 2"
                                class="flex flex-row items-center  w-full h-w50 leading-w50 text-c3 text-f16  mt-w30">
                                <div class=" w-w1/4 text-right pr-w20">基数值</div>
                                <el-input-number class="w-w3/4" v-model="m_data.base" :precision="2" :step="0.01"
                                    :min="0">
                                </el-input-number>
                            </div>
                            <div class="flex flex-row items-center  w-full h-w50 leading-w50 text-c3 text-f16  mt-w30">
                                <div class=" w-w1/4 text-right pr-w20">结果模式</div>
                                <el-radio-group class="w-w3/4" v-model="m_data.result_type">
                                    <el-radio :label="type.id" v-for="(type, mIndex) in list_result_type" :key="mIndex">
                                        {{ type.name }}
                                    </el-radio>
                                </el-radio-group>
                            </div>
                            <div v-if="m_data.result_type == 2"
                                class="flex flex-row items-center  w-full h-w50 leading-w50 text-c3 text-f16  mt-w30">
                                <div class=" w-w1/4 text-right pr-w20">百分比基数</div>
                                <el-input-number class="w-w3/4" v-model="m_data.percentage_base" :step="5" :min="5">
                                </el-input-number>
                            </div>
                            <div class="flex flex-row items-center  w-full h-w50 leading-w50 text-c3 text-f16  mt-w30">
                                <div class=" w-w1/4 text-right pr-w20">排序</div>
                                <el-input-number class="w-w3/4" v-model="m_data.sort" :step="1" :min="0">
                                </el-input-number>
                            </div>
                        </div>
                    </div>
                    <div class="w-full flex flex-row justify-center mt-w30 mb-w30">
                        <el-button class=" w-w1/5 mr-w20" @click="close">取消</el-button>
                        <el-button class=" w-w1/5 bg-cmain_hover" type="primary" @click="actionSubmit">确定
                        </el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts">
import nyMessageToast from "@/utils/NYMessageToast";
import DZModelRule from "@/views/测评管理/model/DZModelRule";
import DZServiceRule from "@/views/测评管理/service/DZServiceRule";
import DZComputeMode from "@/config/DZComputeMode"
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import DZResultType from "@/config/DZResultType";

@Component
export default class UiDialogAddRule extends Vue {

    @Prop() is_showDialog;

    @Prop() data;

    @Prop() assess;

    @Prop() rules;

    is_dialog_show = false;

    m_data = new DZModelRule();

    s_rule = new DZServiceRule();

    assess_id = "";

    list_model = DZComputeMode;

    list_result_type = DZResultType;

    list_rule: Array<DZModelRule> = [];


    created() { }

    mounted() {
        this.assess_id = this.assess;
        this.list_rule = this.rules;
    }

    beforeDestroy() { }

    close() {
        this.$emit('nydialog_closed', '');
        this.initDialog();
    }
    initDialog() {
        this.m_data = new DZModelRule();
        this.is_dialog_show = false;
    }

    @Watch("is_showDialog")
    watchShowDialog(value: any, oldValue: string) {
        this.is_dialog_show = value;
    }
    @Watch("data")
    watchData(value: any, oldValue: string) {
        if (value) {
            this.m_data = JSON.parse(JSON.stringify(value));
        } else {
            this.m_data = new DZModelRule();
        }
    }
    @Watch("rules")
    watchRules(value: any, oldValue: string) {
        this.list_rule = value;
    }
    @Watch("assess")
    watchAssess(value: any, oldValue: string) {
        if (value) {
            this.assess_id = value;
            this.s_rule.net_list_question(this.assess_id);
        } else {
            this.assess_id = "";
        }
    }


    actionSubmit() {
        if (this.m_data.name.nyIsEmpty()) {
            nyMessageToast.warning("请输入规则名称");
            return;
        }
        if (this.m_data.list_question.length > 0) {
            this.m_data.list_question_str = this.m_data.list_question.join(",");
        }
        if (this.m_data.list_about_role.length > 0) {
            this.m_data.list_about_role_str = this.m_data.list_about_role.join(",");
        }
        if (this.m_data.compute_mode == 2 && this.m_data.base == 0) {
            nyMessageToast.warning("请输入基数值");
            return;
        }
        if (this.m_data.compute_mode != 2) {
            this.m_data.base = 0;
        }
        this.$emit('nydialog_submit', this.m_data);
        this.initDialog();
    }
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog {
    border-radius: 4px !important;
    border: none;
}

/deep/.el-dialog__body {
    text-align: left;
    // min-height: 22vw;
    padding: 0px;
}

/deep/ .dialog-tips {
    margin-top: 0 !important;
}

/deep/ .el-dialog__footer {
    text-align: right;
}

/deep/.el-dialog__header {
    height: 0px;
    padding: 0;
}

/deep/ .el-icon-close:before {
    content: '';
}

.nyDialog {
    background: none;
}
</style>
